<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        {{msg}} <br>
        <button @click="msg=`xxx`">update</button>
        <button @click="destroy">干掉vue</button>
    </div>
</body>
<script src="../../js/vue.js"></script>
<script>
    Vue.config.productionTip=false;
    new Vue({
        el:"#app",
        data:{msg:""},
        methods:{
            destroy(){this.$destroy()}
        },


        //vue的初始化渲染开始
        beforeCreate(){
            //只是完成了事件相关的初始化工作
            /*this.$on("test",()=>{console.log("event")});
            this.$emit("test");
            console.log("beforeCreate",this.msg)*/
        },
        created(){
            //完成数据的转绑 和 数据的响应式
            //最早可以发送ajax请求的位置
            //不可以进行dom操作 因为此时模板还没被解析
            //console.log("created",this.msg);
        },
        beforeMount(){
            // console.log("beforeMount",this.$el)
        },
        mounted(){
            //最早可以操作dom的地方
            //如果请求回来的数据 涉及大量的UI效果 那请求建议在mounted中发
            // console.log("mounted",this.$el)
            this.timeId = setInterval(()=>{console.log("setInterval");this.msg+="❤"},1000)
        },
        //vue的初始化渲染结束

        //当data数据产生改变时触发  前后数据得不一致
        beforeUpdate(){console.log("beforeUpdate")},
        updated(){console.log("updated")},

        //当vue销毁时触发
        beforeDestroy(){console.log("beforeDestroy")},
        destroyed(){
            console.log("destroyed");
            //收尾
            clearInterval(this.timeId)
        },
    })
</script>
</html>